import React, { useState } from 'react';
import { Link, Outlet, useNavigate } from 'react-router-dom';


export default function Message() {

  const [messages] = useState([
    { id: "001", title: "消息1", content: "锄禾日当午" },
    { id: "002", title: "消息2", content: "汗滴禾下土" },
    { id: "003", title: "消息3", content: "谁知盘中餐" },
    { id: "004", title: "消息4", content: "粒粒皆辛苦" }
  ])

  const navigate = useNavigate();
  const showDetail = (m) => {
    // console.log(m);
    navigate('detail', {
      replace: false,
      state: {
        ...m
      }
    })
  }

  return (
    <div>
      <ul>
        {
          messages.map((m) => {
            return (
              <li key={m.id}>
                <Link to="detail"
                  state={{...m}}>
                  {m.title}
                </Link>
                <button onClick={() => showDetail(m)}>查看详情</button>
              </li>
            )
          })
        }
      </ul>
      <br />
      <Outlet />
    </div>
  )
}
